<template>
    <div class="platform">
        <my-tag title="材料详情" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" label-width="auto" class="demo-ruleForm platform-formList">
                <div class="form-left-six">
                    <el-form-item label="材料商" prop="materialSupplierId">{{ form.materialSupplierName }}</el-form-item>
                    <el-form-item label="材料名称" prop="materialName">{{ form.materialName }}</el-form-item>
                    <el-form-item label="材料简述" prop="materialBriefly">{{ form.materialBriefly }}</el-form-item>
                    <el-form-item label="材料描述" prop="materialDesc">{{ form.materialDesc }}</el-form-item>
                    <el-form-item label="详细参数">
                        <el-table :data="tableData" style="width: 100%" border>
                            <el-table-column prop="ParamsName" label="名称" align="center" width="180"></el-table-column>
                            <el-table-column prop="description" label="描述" align="center"></el-table-column>
                        </el-table>
                    </el-form-item>
                </div>
                <div class="form-right-four">
                    <el-form-item label="封面图片" prop="coverImageUrl">
                        <div class="coverImg-style">
                            <ImagePreview :width="250" :height="230" :src="form.coverImageUrl"
                                :preview-src-list="[form.coverImageUrl]" />
                        </div>
                    </el-form-item>
                    <el-form-item label="产品展示图" prop="showImage">
                        <ImagePreview v-for="(v, i) in form.showImage" :key="i" :width="100" :height="100" :src="v.url"
                            :preview-src-list="[v.url]" style="margin:0 10px 10px 0;" />
                    </el-form-item>
                    <el-form-item label="审核状态" prop="materialStatus">
                        <dict-tag :options="material_status" :value="form.materialStatus" />
                    </el-form-item>
                    <el-form-item label="未通过原因" prop="remark" v-if="form.materialStatus === 2">
                        {{ form.remark }}
                    </el-form-item>
                </div>
            </el-form>
            <div class="platform-submit-btn">
                <el-button @click="cancel">返 回</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getImgUrl } from "@/api/decor/designer";
import { getPlatformMaterialDetail } from "@/api/decor/materialSupplier";
const remarkLimit = ref(false)
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const { material_status } = proxy.useDict('material_status');
const tableData = ref([])
const data = reactive({
    form: {},
});
const { form } = toRefs(data);

// 获取材料数据
(() => {
    const materialId = route.params.materialId
    if (materialId) {
        getPlatformMaterialDetail(materialId).then((res) => {
            let materialAuditData = res.data;
            materialAuditData.showImage = '';
            materialAuditData.coverImageUrl = '';
            let imgUrlPromises = [];
            // 获取产品展示图的异步操作
            if (materialAuditData.materialShowcase) {
                let showImagePromise = getImgUrl(materialAuditData.materialShowcase).then((res) => {
                    materialAuditData.showImage = res.data;
                });
                imgUrlPromises.push(showImagePromise);
            }
            // 获取封面图片的异步操作
            if (materialAuditData.coverImage) {
                let coverImagePromise = getImgUrl(materialAuditData.coverImage).then((res) => {
                    materialAuditData.coverImageUrl = res.data[0].url;
                });
                imgUrlPromises.push(coverImagePromise);
            }
            // 等待所有的异步操作完成
            Promise.all(imgUrlPromises).then(() => {
                // 所有的异步操作完成后再更新 detailPlannerForm.value
                form.value = materialAuditData;
                tableData.value = JSON.parse(form.value.materialParams)
            });
        })
    }
})();

// 返回
const cancel = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
.hoseType {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .hoseType-box {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .unit {
            font-family: NotoSansHans, NotoSansHans;
            font-weight: 600;
            font-size: 14px;
            color: #000000;
            line-height: 21px;
            font-style: normal;
            padding: 0 10px 0 4px;
        }
    }
}

.default-btn {
    width: 60px;
    height: 17px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #EF5A42;
    line-height: 17px;
    text-align: left;
    font-style: normal;
    width: 110px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #EF5A42;
    margin-top: 10px;
}

::v-deep(.el-button--primary.is-link, .el-button--primary.is-text) {
    width: 24px;
    height: 17px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #EF5A42;
    padding: 0;
}

.coverImg-style {
    width: 100%;

    ::v-deep(.el-upload-list--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 320px;
        height: 240px;
        border-radius: 8px;
        border: 1px solid #CDD4E0;
    }

}
</style>